import React, { FC } from "react";
import { Typography } from "antd";
import { QuestionTitlePropsType, QuestionTitleDefaultProp } from "./interface";

const { Title } = Typography;
const QuestionTitle: FC<QuestionTitlePropsType> = (
  props: QuestionTitlePropsType
) => {
  const {
    text = "",
    level = 1,
    isCenter = false,
  } = { ...QuestionTitleDefaultProp, ...props };    
  const getFontSize = (level: number) => {
    if (level == 1) return "24px";
    if (level == 2) return "20px";
    if (level == 3) return "16px";
    if (level == 4) return "12px";
    if (level == 5) return "10px";
  };
  return (
    <div>
      <Title
        level={level}
        style={{
          textAlign: isCenter ? "center" : "start",
          marginBottom: "0px",
          fontSize: getFontSize(level),
        }}
      >
        {text}
      </Title>
    </div>
  );
};
export default QuestionTitle;
